<template>
  <el-form ref="ruleForm" :model="addForm" :rules="typeRules" label-width="120px">
    <el-form-item label="分类" prop="platDemandTypeId">
      <el-select v-model="addForm.platDemandTypeId" placeholder="请选择分类">
        <el-option v-for="(item,index) in tableData" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="addForm.title" />
    </el-form-item>
    <el-form-item label="需求">
      <el-select v-model="addForm.type" placeholder="请选择需求">
        <el-option
          v-for="item in type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="需求类型" prop="demandType">
      <el-select v-model="addForm.demandType" placeholder="请选择需求类型">
        <el-option
          v-for="item in demandType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="需求具体类型">
      <el-input v-model="addForm.demandTypes" />
    </el-form-item> -->
    <el-form-item label="简介">
      <el-input v-model="addForm.introduce" />
    </el-form-item>
    <el-form-item label="技术名称">
      <el-input v-model="addForm.technologyName" />
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="addForm.phone" />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="addForm.goodsName" />
    </el-form-item>
    <el-form-item label="商品数量">
      <el-input v-model="addForm.goodsNum" type="number" />
    </el-form-item>
    <!-- <el-form-item label="封面">
      <el-upload
        class="avatar-uploader"
        :action="action"
        :headers="myHeaders"
        :show-file-list="false"
        :on-success="(res)=>{handleAvatarSuccess(res,'cover')}"
      >
        <img v-if="addForm.cover" :src="addForm.cover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <el-input v-model="addForm.cover" style="margin-top:20px;" placeholder="请输入图片地址" />
      <span class="tips">请上传图片或输入图片地址，建议尺寸：500*700px</span>
    </el-form-item> -->
    <el-form-item label="单位">
      <el-input v-model="addForm.unit" />
    </el-form-item>
    <el-form-item label="地区">
      <el-input v-model="addForm.region" />
    </el-form-item>
    <el-form-item label="详情">
      <tinymce ref="tinymceContent" v-model="addForm.details" :height="400" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addForm_enter('ruleForm')">保存</el-button>
      <el-button @click="close()">关闭</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
import Tinymce from '@/components/Tinymce'
import { uploadUrl, token } from '@/utils/request'
import {
  demandTypeList,
  demandAdd,
  demandDetail
} from '@/api/demand'
export default {
  components: { Tinymce },
  data () {
    return {
      type: [
        {
          value: 1,
          label: '技术需求'
        },
        {
          value: 2,
          label: '采购需求'
        },

      ],
      demandType: [
        {
          value: 1,
          label: '平台'
        },
        {
          value: 2,
          label: '企业'
        },
        {
          value: 3,
          label: '观众'
        },

      ],
      action: uploadUrl,
      myHeaders: {
        'Authorization-admin': token
      },
      formInline: {
        name: '', // 搜索字段
        page: '1', // 当前页
        pageSize: '1000' // 每页记录数
      },
      tableData: [],
      addForm: {},
      typeRules: {
        // demandType: [{ required: true, message: '请选择需求类型', trigger: 'blur' }],
        platDemandTypeId: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        phone: [
          { required: false, pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请选择正确的手机格式', trigger: 'blur' }
        ],
        // email: [
        //   { required: false, pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
        // ]
      },
      typeState: true
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    // 图片上传回调
    handleAvatarSuccess (response, key) {
      const { url } = response.data
      this.addForm[key] = url
      this.$forceUpdate()
    },
    // 确认新增供采
    addForm_enter (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.typeState) {
            console.log(this.addForm)
            demandAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.$router.go(-1)
              }
              // this.getAll(this.formInline)
              // this.addFormDialog = false
            })
          } else {
            demandAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$router.go(-1)
              }
              // this.getAll(this.formInline)
              // this.addFormDialog = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close () {
      this.$router.go(-1)
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await demandTypeList(formInline)
      this.tableData = res.data.list
      const id = this.$route.query.id
      if (id) {
        const detail = await demandDetail({ id: id })
        this.addForm = detail.data
        this.typeState = false
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: auto;
    display: block;
  }
</style>
